<template>
  <div class="app-container">
    <el-header>
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="应用">
          <el-select v-model="listQuery.appId" placeholder="请选择">
            <el-option
              v-for="item in appSelectData"
              :key="item.value"
              :label="item.appName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置名">
          <el-input v-model="listQuery.configName"/>
        </el-form-item>
        <el-form-item label="环境">
          <el-select v-model="listQuery.profileId">
            <el-option
              v-for="item in profileList"
              :key="item.profileName"
              :label="item.profileName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="listQuery.groupId">
            <el-option
              v-for="item in groupList"
              :key="item.groupName"
              :label="item.groupName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onQueryFormSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-circle-plus-outline" @click="handleAdd">增加</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-circle-plus-outline" @click="batchForm.showForm= true">导入</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-header>
      <el-pagination
        background
        layout="sizes, prev, pager, next"
        @current-change="onPageNumChange"
        @size-change="onPageSizeChange"
        :data="listQuery"
        :current-page.sync="listQuery.pageNum"
        :total="listQuery.total">
      </el-pagination>
    </el-header>
    <el-table :data="tableData"
              v-loading.body="listLoading"
              border fit highlight-current-row>
      <el-table-column prop="id" label="" align="center" type="expand">
          <el-form slot-scope="props" label-position="left">
            <el-form-item label="id">
              <span>{{props.row.id}}</span>
            </el-form-item>
            <el-form-item label="应用名">
              <span>{{props.row.appName}}</span>
            </el-form-item>
            <el-form-item label="应用代码">
              <span>{{props.row.appCode}}</span>
            </el-form-item>
            <el-form-item label="环境">
              <span>{{props.row.profileName}}</span>
            </el-form-item>
            <el-form-item label="分组">
              <span>{{props.row.groupName}}</span>
            </el-form-item>
            <el-form-item label="配置名">
              <span>{{props.row.configName}}</span>
            </el-form-item>
            <el-form-item label="属性值">
              <span>{{props.row.configValue}}</span>
            </el-form-item>
            <el-form-item label="版本">
              <span>{{props.row.version}}</span>
            </el-form-item>
            <el-form-item label="备注">
              <span>{{props.row.remark}}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{props.row.createdTime}}</span>
            </el-form-item>
            <el-form-item label="修改时间">
              <span>{{props.row.updatedTime}}</span>
            </el-form-item>
          </el-form>
      </el-table-column>
      <el-table-column prop="appCode" label="应用ID" align="center"/>
      <el-table-column prop="profileName" label="环境" align="center"/>
      <el-table-column prop="groupName" label="分组" align="center"/>
      <el-table-column prop="configName" label="配置名" align="center"/>
      <el-table-column prop="configValue" label="属性值" align="center" class-name="long-text"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button icon="el-icon-edit" @click="handleEdit(scope.row)"/>
            <el-button icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-footer>
      <el-pagination
        background
        layout="sizes, prev, pager, next"
        @current-change="onPageNumChange"
        @size-change="onPageSizeChange"
        :data="listQuery"
        :current-page.sync="listQuery.pageNum"
        :total="listQuery.total">
      </el-pagination>
    </el-footer>
    <el-dialog :visible.sync="editForm.showForm" :before-close="clearForm" width="600px" title="配置">
      <el-form v-model="editForm" label-width="80px">
        <el-input type="hidden" v-model="editForm.id"/>
        <el-form-item label="应用ID">
          <el-select v-model="editForm.appId" placeholder="请选择">
            <el-option
              v-for="item in appSelectData"
              :key="item.value"
              :label="item.appName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境">
          <el-select v-model="editForm.profileId">
            <el-option
              v-for="item in profileList"
              :key="item.profileName"
              :label="item.profileName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="editForm.groupId">
            <el-option
              v-for="item in groupList"
              :key="item.groupName"
              :label="item.groupName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置名">
          <el-input v-model="editForm.configName"/>
        </el-form-item>
        <el-form-item label="属性值">
          <el-input type="textarea" v-model="editForm.configValue"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editForm.remark"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="clearForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="batchForm.showForm" :before-close="clearBatchForm" width="60%" title="文件导入">
      <el-form v-model="batchForm" label-width="80px">
        <el-form-item label="应用">
          <el-select v-model="editForm.appId" placeholder="请选择">
            <el-option
              v-for="item in appSelectData"
              :key="item.value"
              :label="item.appName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境">
          <el-select v-model="editForm.profileId">
            <el-option
              v-for="item in profileList"
              :key="item.profileName"
              :label="item.profileName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="editForm.groupId">
            <el-option
              v-for="item in groupList"
              :key="item.groupName"
              :label="item.groupName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贴一贴">
          <el-input type="textarea" :rows="20" v-model="batchForm.content"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearBatchForm">取消</el-button>
          <el-button type="primary" @click="onSubmitBatchImport">导入</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import "@/styles/common.scss";
import request from "@/utils/request";
import { MessageBox } from "element-ui";
import { listAllProfile } from "@/api/profile";
import appApi from "@/api/app";
import { listAllGroup } from "@/api/group";
import { listConfig, saveOrUpdateConfig, batchAddConfig } from "@/api/config";
import { clearAttrs } from "@/utils";

export default {
  name: "configTable",
  data() {
    return {
      listLoading: true,
      tableData: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        configName: "",
        groupName: ""
      },
      appSelectData:[],
      editForm: {
        showForm: false,
        id: -1,
        appCode: "",
        deploymentId: "",
        profileId: "",
        groupId: "",
        configName: "",
        configValue: ""
      },
      batchForm: {
        showForm: false,
        content: ""
      },
      profileList: [],
      groupList: []
    };
  },
  methods: {
    onSubmitBatchImport() {
      Object.assign(this.batchForm, this.editForm);
      batchAddConfig(this.batchForm).then(() => {
        this.clearBatchForm();
        this.fetchData();
      });
    },
    clearBatchForm() {
      clearAttrs(this.batchForm);
    },
    onSubmit() {
      saveOrUpdateConfig(this.editForm).then(() => {
        this.clearForm();
        this.fetchData();
      });
    },
    onQueryFormSubmit() {
      this.fetchData();
    },
    onPageNumChange(currentPage) {
      this.listQuery.pageNum = currentPage;
      this.fetchData();
    },
    onPageSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.fetchData();
    },
    handleDelete(row) {
      MessageBox.confirm("删除后可以在配置历史里恢复,确认删除?", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          request({
            url: "config/delete",
            data: {
              id: row.id
            }
          }).then(() => {
            this.fetchData();
          });
        })
        .catch(() => {});
    },
    handleEdit(row) {
      Object.assign(this.editForm, row);
      this.handleAdd();
    },
    handleAdd() {
      this.fetchProfile();
      this.fetchGroup();
      this.fetchApp();
      this.editForm.showForm = true;
    },
    clearForm() {
      clearAttrs(this.editForm);
    },
    fetchData() {
      this.listLoading = true;
      listConfig(this.listQuery)
        .then(response => {
          let { data } = response;
          let { list } = data;
          this.tableData = list;
          this.listQuery.currentPage = data.pageSize;
          this.listQuery.total = data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    fetchProfile() {
      listAllProfile().then(response => {
        let { data } = response;
        this.profileList = data;
      });
    },
    fetchGroup() {
      listAllGroup().then(response => {
        let { data } = response;
        this.groupList = data;
      });
    },
    fetchApp(){
      appApi.listAll()
      .then(({data})=>{
        this.appSelectData = data;
      });
    }
  },
  created() {
    this.fetchData();
    this.fetchGroup();
    this.fetchProfile();
    this.fetchApp();
  }
};
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
